<template>
    <scroll-view :scroll-y="true" style="height: calc(100vh - 266rpx)"
                 @scrolltolower="reachScrollBottom">
        <view class="needs-list">
            <view class="needs-item" v-for="(item, index) in needsList" :key="index" @click="skipNeedsDetail(item.id)">
                <view class="needs-item-top">
                    <text class="item-title">{{item.title}}</text>
                    <view class="item-city">
                        <text>{{item.city}}</text>
                        <img mode="widthFix" src="../../../static/img/position.png" />
                    </view>
                    <!--<text :class="{'item-status':true,'blue':item.status==0,'green':item.status==1}">{{item.status==0?'筛选中':'对接成功'}}</text>-->
                </view>
                <!--<view class="needs-item-bottom">
                    <view class="item-btn-item item-btn-item-spec">
                        <img class="spec-img" src="../../../static/img/needs-type.png" />
                        <text class="spec-text">{{item.classify_name}}</text>
                    </view>
                </view>-->
                <view v-if="item.budget" class="needs-item-bottom" style="margin-top: 15px;">
                    <text style="color: #333333;font-size: 26rpx">服务预算：{{item.budget}}</text>
                </view>
                <view class="needs-item-center">
                    <view class="item-content-text">{{item.content}}</view>
                    <view class="item-content-tip" v-if="item.label_arr.length>0">
                        <view v-for="(tip, ids) in item.label_arr" :key="ids">{{tip}}</view>
                    </view>
<!--                    <view class="item-content-img" v-if="item.img_array_url.length>0">-->
<!--                        <img v-for="(url, ids) in item.img_array_url" :key="ids" :src="url" mode="aspectFill">-->
<!--                    </view>-->
                </view>
                <view class="needs-item-bottom">
                    <view class="item-btn-item">
                        <img :src="File_Url+'eyes-icon.png'" />
                        <text>{{item.browse_num}}</text>
                    </view>
                    <view class="item-btn-item">
                        <img :src="File_Url+'collect-active.png'" v-if="item.is_collection==1"/>
                        <img :src="File_Url+'collect.png'" v-else/>
                        <text>{{item.attention_num}}</text>
                    </view>
                    <view class="item-time">{{item.created_at.split(' ')[0]}}</view>
                </view>
            </view>

            <!--<view class="null">
                <load-more :loading="true" :tip="'加载中'" v-if="showLoading"></load-more>
                <text v-if="needsTotal == needsList.length && !showLoading">没有更多了哦～</text>
            </view>-->
            <view class="null" v-if="is_personal_auth==1">
                <text v-if="needsTotal == needsList.length && !showLoading">没有更多了哦～</text>
                <text v-if="needsTotal != needsList.length && !showLoading">上拉加载更多～</text>
                <load-more :loading="true" :tip="'加载中'" v-if="showLoading"></load-more>
            </view>

            <view class="action-msg" v-if="!userInfo">
                <span @click="toLogin" class="btn-go">登录</span><span class="last-msg">后发现更多商机～</span>
            </view>
            <view class="action-msg" v-if="is_personal_auth && is_personal_auth !='' && is_personal_auth != 1">
                <span @click="toAuth" class="btn-go" v-if="is_personal_auth == -1 || is_personal_auth == 2">认证</span>
                <span class="last-msg" v-if="is_personal_auth == -1 || is_personal_auth == 2">后获得更多商机～</span>
                <span @click="moreDemand" class="btn-go" v-if="is_personal_auth == 0">点击查看</span>
                <span class="last-msg" v-if="is_personal_auth == 0">更多商机～</span>
            </view>
        </view>
    </scroll-view>
</template>

<script>
    import loadMore from "../loadMore/loadMore";
    export default {
        name: "needsList",
        props:{
            classify_id: {
                type: Number
            },
            region: {
                type: Array,
                default: ['','','']
            },
            /*Index: {
                type: Number,
                default: 0
            },*/
            hotItem: {
                type: Number,
                default: 1
            },
            updateFlag: {
                type: Boolean
            },
            updateAuth:{
                type: Number,
            },
            userInfo: {
                type: Object,
                default: {}
            }
        },
        components: {
            loadMore
        },
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                needsList: [],
                needsTotal: 0,
                myRegion: [],
                needsPage: 1,
                showLoading: false,
                user_info:"",
                is_personal_auth:1
            }
        },
        methods:{
            async moreDemand(){
                let userToken=uni.getStorageSync('userToken');
                const res=await this.$api.getUserInfos({user_token:userToken});
                if(res.data.level=='success'){
                    if(res.data.data.user_info.personal_auth_status == 0){
                        uni.showToast({
                            title:'认证审核中，审核通过后即可获取更多商机',
                            icon:'none'
                        })
                    }else {
                        this.getDemandList()
                    }
                    uni.setStorageSync('is_Vip',res.data.data.user_info.is_member_unit);//判断是否单位入驻
                    uni.setStorageSync('is_unit_auth',res.data.data.user_info.is_unit_auth);
                    uni.setStorageSync('is_personal_auth',res.data.data.user_info.personal_auth_status);
                    this.is_personal_auth = res.data.data.user_info.personal_auth_status
                }
            },
            //获取需求列表
            async getDemandList(){
                this.showLoading = true;
                let params = {
                    page: this.needsPage,
                    limit: 10,
                    province: this.region[0],
                    city: this.region[1],
                    area: this.region[2],
                    /*is_recommend: this.Index+1,*/
                    is_hot: this.hotItem,
                    classify_id: this.classify_id,
                    user_token: uni.getStorageSync('userToken')
                }
                /*if (this.industryItem!=0){
                    params.industry_id = this.industryList[this.industryItem-1].id;
                }*/
                const res = await this.$api.getDemandList(params);
                if (res.data.level == 'success'){
                    if (this.needsPage == 1){
                        this.needsList = res.data.data;
                    }else {
                        if(res.data.data.length == 0){
                            this.demandPage--;
                        } else{
                            this.needsList = this.needsList.concat(res.data.data)
                        }
                    }
                    this.needsTotal = res.data.page_info.total;
                }
                this.showLoading = false;
            },
            //更新组件
            updateNeedsListData() {
                this.needsPage = 1;
                this.getDemandList();
            },
            //跳转需求详情页面
            skipNeedsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/needsDetail/needsDetail?needsId='+id
                })
            },
            reachScrollBottom() {
                if(this.needsTotal != this.needsList.length){
                    this.needsPage++;
                    this.getDemandList();
                }
            },
            //跳转个人认证页面
            toAuth(){
                uni.navigateTo({
                    url:'/pages/Authentication/personAuth/personAuth'
                })
            },
            //跳转登录页面
            toLogin(){
                uni.switchTab({
                    url: '/pages/person/person'
                })
            },
        },
        onReady() {
            // this.user_info = this.userInfo
            this.is_personal_auth = uni.getStorageSync('is_personal_auth');
            this.getDemandList();
        },
        watch: {
            region: {
                handler(val){
                    this.needsPage = 1;
                    this.getDemandList();
                }
            },
            /*Index: {
                handler(val) {
                    this.needsPage = 1;
                    this.getDemandList();
                }
            },*/
            hotItem: {
                handler(val) {
                    this.needsPage = 1;
                    this.getDemandList();
                }
            },
            updateFlag: {
                handler(val) {
                    this.updateNeedsListData();
                }
            },
            updateAuth: {
                handler(val) {
                    this.is_personal_auth = uni.getStorageSync('is_personal_auth');
                    this.getDemandList();
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .loading-section{
        width: 100%;
        height: 95px;
        display: flex;
        justify-content: center;
        .sk-circle-fade{
            width: 20px;
            height: 20px;
        }
        img{
            width: 146px;
            height: 95px;
        }
    }
    scroll-view{
        width: 100%;
        white-space: nowrap;
    }
    .needs-list{
        min-height: calc(100vh - 300rpx);
        .needs-item{
            padding: 20rpx 30rpx;
            border-bottom: 10rpx solid #F8F8F8;
            .needs-item-top{
                /*height: 57rpx;*/
                height: 63rpx;
                @include flex(flex-start);
                flex-wrap: wrap;
                flex-direction: row;
                .item-title{
                    height: 45rpx;
                    line-height: 45rpx;
                    font-size: 32rpx;
                    font-weight: bold;
                }
                .item-city{
                    text-align: right;
                    display: flex;
                    align-items: center;
                    flex-direction: row-reverse;
                    margin-left: auto;
                    text{
                        min-width: 30px;
                        font-size: 28rpx;
                        color: #666666;
                        line-height: 14px;
                    }
                    img{
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
                .item-status{
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    width: 100%;
                    text-align: right;
                }
                .blue{
                    color: #3782FF;
                }
                .green{
                    color: #00C735;
                }
                .red{
                    color: #FF6565;
                }
            }
            .needs-item-center{
                padding: 10rpx 0rpx 16rpx 0;
                .item-content-text{
                    @include ellipsis(3);
                    font-size: 26rpx;
                    line-height: 37rpx;
                    margin-bottom: 16rpx;
                    margin-top: 10rpx;
                }
                .item-content-tip{
                    @include flex(flex-start);
                    flex-direction: row;
                    view{
                        height: 40rpx;
                        padding: 0 16rpx;
                        background: #3782FF;
                        border-radius: 8rpx;
                        font-size: 26rpx;
                        line-height: 40rpx;
                        margin-right: 10rpx;
                        color: #FFFFFF;
                    }
                }
                .item-content-img{
                    @include flexWrap(flex-start);
                    flex-direction: row;
                    padding: 20rpx 0;
                    img{
                        width: calc((100% - 36rpx)/3);
                        height: 140rpx;
                        margin: 6rpx;
                        border-radius: 4rpx;
                    }
                    img:last-child{
                        margin-right: 0;
                    }
                }
            }
            .needs-item-bottom{
                @include flex(flex-start);
                flex-direction: row;
                .item-btn-item{
                    @include flex();
                    flex-direction: row;
                    margin-right: 20rpx;
                    img{
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 10rpx;
                    }
                    text{
                        height: 40rpx;
                        line-height: 40rpx;
                        font-size: 28rpx;
                        color: #666666;
                    }
                    .spec-img{
                        width: 22rpx;
                        height: 22rpx;
                        margin-left: 4rpx;
                    }
                    .spec-text{
                        color: #333333;
                    }
                }
                .item-btn-item-spec{
                    padding: 4rpx 20rpx;
                    background-color: #f1f1f1;
                    border-radius: 20rpx;
                }
                .item-time{
                    margin-left: auto;
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    color: #666666;
                }
            }
        }
        .action-msg{
            text-align: center;
            font-size: 30rpx;
            padding: 30rpx;

            .last-msg{
                color: #999a9a;
            }
            .btn-go{
                color: #169BD5;
                text-decoration: underline;
            }
        }
    }
</style>